
* { margin: 0; padding: 0; } 
@font-face{
    font-family: "GretoonHighlight";
    src: url("fonts/GretoonHighlight.ttf") format("truetype");;
}
@font-face{
    font-family: "Gretoon";
    src: url("fonts/Gretoon.ttf") format("truetype");;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 14px;
    font-family: Arial;
    vertical-align: baseline;
}
.row{
    margin: 0;
}
.row, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
    padding: 0;
}
ul, ol {list-style: none;}
strong {font-weight: bold;}

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */

body { font: 14px Arial;}

/*
        TYPOGRAPHY
*/
h1, h2, h3, h4, h5 {}
a img { border: 0; }
a {color: #c00c0c; text-decoration: none;}
.zoomer:active { top: 0; }

.cya-body{ background: url("../img/background.png")top left;}
.cya-container{
    max-width: 960px;
    margin: 0 auto; 
    background-color: #fff;
}



/* header */
.header, .navbar-default{
    color: #fff;
    background-color: #0d0d0d;
    border-color: #0d0d0d;
    text-align: center;
}
.left-header{
    padding-top: 20px;
    font-size: 42px;
    font-family: Gretoon;
    color: #e9642b;
    /*    text-indent: -9999;
        background: url("../img/cya-fun-logo.png") no-repeat center;*/
}
.left-header a{
    font-size: 42px;
}
.right-header{
    padding-top: 10px;
}
.player-online, .player-online-content, .language-box  {
    float: left;
    min-height: 31px;
    line-height: 31px;
}
.right-header-top span{
    float: left;
    min-height: 31px;
    line-height: 31px;
    background-color: #fff;
    color: #000;
}
.player-online{
    /*    width: 16%;*/
    width: 14%;
    background: url("../img/cyafun_homepage.png") no-repeat top left;
}
.player-online-content{
    background-color: #fff;
    width: 28%;
    color: #000;
}
.language-box-second{
    display: none;
}
.language-box{
    width: 25%;
    float: right;
}
.language-box select{
    width: 91%;
    float: right;
    min-height: 31px;
    color: #000;
}
.right-header-bottom{
    padding-top: 10px;
    padding-bottom: 10px;
}
.btn-login, .link-to-facebook{
    min-height: 30px;
    line-height: 30px;
}
.header-invisible .btn-login{
    display: none;
}
.btn-login{
    padding-left: 10px;
    float: left;
}
.btn-login div{
    width: 43%;
    float: left;
    background-color: #a00a0a;
}
.btn-login a{
    color: #fff;
}
.btn-login span{
    display: inline-block;
    width: 1%;
    float: left;
    background-color: #a00a0a;
}
.link-to-facebook{
    float: right;
}
.link-to-facebook ul{
    float: right;
}
.link-to-facebook ul li{
    display: inline-block;
    float: left;
    width: 95px;
    border: 2px solid #3c3c3c;
    margin-left: 2px;
}
.btn-link-to-facebook{
    width: 41px;
    display: inline-block;
}
.count-facebook-like{
    width: 50px;
    display: inline-block;
    float: right;
}
.btn-facebook{
    background-color: #4963a4;
}
.btn-tweet{
    background-color: #4798d2;
}
.btn-google{
    background-color: #d3442b;
    height: 30px;
    padding-top: 9px;
    padding-left: 16px;
}
.btn-google i{
    float: left;
}
.navbar{
    margin-bottom: 0px; 
    border: none; 
}
.cya-navbar{
    padding-right: 0px;
}
.cya-navbar ul li a{
    color: #fff !important;
}
.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:hover, 
.navbar-default .navbar-nav>.open>a:focus,  
.cya-navbar ul li.nav-active a{
    background-color: #0d0d0d;
}
.navbar-nav>li>.dropdown-menu, .dropdown-menu li:hover, .dropdown-menu li a:hover{
    background-color: #0d0d0d;
}
.cya-navbar ul li.nav-active a{
    color: #9c0c0c !important;
}
.cya-search-second{
    display: none;
}
.cya-navbar form.cya-search{
    position: relative;
    right: 1;
    margin-right: 0px !important;
}
.cya-search .form-group{
    right: 0;
    position: absolute;
}
.cya-search button{
    right: 0;
    position: absolute;
    border: none;
    min-height: 32px;
}
.cya-search button:hover{
    background: none;
    border: none;
}
.cya-search button span{
    color: #c00c0c;
}
.cya-search input{
    border-radius: 0px;
    padding: 0px 7px;
}


/* slider */
.slider{
    /*margin-top: -22px;*/
}
.slider-top{
    min-height: 293px;
    background: url("../img/slide-background.png") no-repeat;
    background-color: #0d0d0d;
}
.nivoSlider{
    width: 99.3% ;
    height: 285px ;
    padding-top: 8px;
    padding-left: 8px;
}
.slider-top div img{
    padding-top: 8px;
    padding-left: 8px;
    width: 99.3% ;
    height: 285px ;
}
.mainslider{
    position: relative;
}
.how-to-play{
    padding-top: 50px;
    padding-bottom: 5px;
}
.how-to-play-content{
    min-height: 135px;
    padding: 0px 7px;
    padding-top: 40px;
}
.how-to-play-content-title{
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 20px;
}
.how-to-play-content-title .top-player-number{
    background-color: #f0f0f0;
    color: #000;
    border-color: #729956;
}
.how-to-play-content-first{
    line-height: 29px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    padding-top: 40px;
}
.how-to-play-content-first span{
    font-size: 36px;
    text-align: center;
    font-weight: bold;
    color: #c00c0c;
}
.slider-bottom{
    background-color: #040404;
}
.slider-bottom section .flexslider{
    margin: 0 0 30px;
    border: 4px solid #040404;
}
.slider-bottom section .flexslider .flex-direction-nav .flex-prev,
.slider-bottom section .flexslider .flex-direction-nav .flex-next,
.slider-bottom section .flexslider .flex-direction-nav .flex-disabled{
    opacity: 1 !important;
}
.slider-bottom section .flexslider .flex-viewport{
    background-color: #040404;
}
.slider-bottom section .flexslider .slides img{
    border: 1px solid;
    border-radius: 8px;
}
.slider-bottom-header{
    width: 100%;
    text-align: center;
}
.slider-bottom-header-content{
    display: inline-block;
    margin: 0 auto;
    padding: 10px 0px;
}
.slider-bottom-header hr{
    width: 80px;
    display: inline-block;
    margin: 0px;
    border-top: 1px solid #eee;
    padding-bottom: 7px;
}
.slider-bottom-header-text{
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}
.flexslider .slides > li{
    opacity: 0.5;
}
.flexslider .slides > li:hover{
    opacity: 1;
}
.triangle-right{
    position: absolute;
    bottom: 0;
    right: 5px;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    border-right: 0px double transparent;
    border-left: 20px double transparent;
    border-bottom: 20px solid #c00c0c;
    width: 0;
    height: 0;

}
.triangle-left{
    position: absolute;
    top: 0;
    left: 5px;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    border-right: 35px double transparent;
    border-left: 0px double transparent;
    border-top: 35px solid #c00c0c;
    width: 0;
    height: 0;
}
.slider-bottom-content{
    min-height: 160px;
    position: relative;
}
.slider-bottom-content button.prev{
    position: absolute;
    left: -12px;
    top: 50px;
}
.slider-bottom-content button.next{
    position: absolute;
    right: -13px;
    top: 50px;
}
.slider-bottom-content .any-class li{
    width: 25%;
}
.slider-bottom-content .any-class img{
    width:100%; height:118px;
}
.flex-pauseplay{
    display: none;
}

/* body */
.body{
    min-height: 360px;
}
.body group{
    text-align: left;
}
.body-top, body-bottom{
    padding-right: 3px;
}
.body-bottom{
    padding-top: 20px;
    padding-left: 3px;
}
.recomment-game .recomment-game-header{
    padding-top: 25px;
    padding-bottom: 27px;
}
.recomment-game-header, .news-header{
    position: relative;
    padding-left: 40px;
}
.body-new .news-header{
    padding-top: 25px;
    padding-bottom: 3px;
}
.recomment-game-header-content ul li:not(:first-child){
    padding-top: 20px;
}
.recomment-game-text{
    padding-left: 10px;
    font-size: 13px;
}
.recomment-game-text h3{
    font-weight: bold;
    padding-bottom: 10px;
}
.recomment-game, .body-new {
    padding-left: 20px;
}
.body-new-content ul li{
    float: left;
    clear: none;
    padding-top: 15px;
    padding-right: 10px;
}
.body-header{
    font-size: 16px;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
}
.tabs {height: 33px;border-left: 1px solid #bcd4da;}
.tabs li {float: left;line-height: 31px;border-top: 1px solid #c5c5c5;}
.tabs li a {color: white;display: block;padding: 0 28px;background-color: #0f0f0f;}
.tabs li:last-child a {padding: 0px 17px 0px 16px;}
.tabs li a:hover {background-color: #fff; color: #000;}
.tabs li a.active {background-color: #fff;color: #000;}
.tab_container {border: 1px solid #bcd4da;border-top: none;margin:  0px 0px 20px 0px; width: 311px; min-height: 300px;}
.tab_content {padding: 15px 0px 15px 0px;}
.tab_content ul li {padding: 7px 0px;}
.tab_content ul li:nth-child(odd) {background: #e8e8e8;}
.tab_content ul li a {color: #666;}
.tab_content ul li a:hover {color: #ce9702;}
.game-focus-content{
    padding-top: 4px;
    width: 311px;
}
.game-focus-content img{
    width: 100%;
}
.tab-header{
    width: 311px;
    background-color: #ebebeb;
    border: 1px solid #d0d0d0;
    margin-bottom: 10px;
}
.tab-header img, 
.game-focus .body-header img{
    margin-bottom: -6px;
    padding-right: 10px;
    padding-left: 10px;
}
.tab-header-before{
    margin-left: -11px;
    position: absolute;
    display: inline-block;
    height: 69px;
}
.tab-header-before-top{
    width: 11px;
    height: 59px;
    display: inline-block;
    border: 1px solid #d3d3d3;
    background-color: #eeeeee;
}
.tab-header-before .tab-header-triangle{
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    border-right: 0px double transparent;
    border-left: 13px double transparent;
    border-top: 12px solid #ebebeb;
    width: 0;
    height: 0;
}
.top-player-number, .top-player-content, .top-player-count{
    display: inline-block;
}
.top-player-number{
    width: 31px;
    height: 31px;
    border: 1px solid #d69147;
    border-radius: 31px;
    line-height: 31px;
    text-align: center;
    background-color: #d69147;
    color: #fff;
    margin-left: 3px;
}
.top-player-count{
    float: right;
    padding-right: 3px;
}
.top-player-content{
    padding-left: 3px;
}

/* footer */

.footer{
    margin-top: 20px;
    border-top: 3px solid #1b1b1b;
    color: #000;
}
.footer-content{
    padding: 20px 0px 20px 0px;
    line-height: 60px;
}
.footer-left{
    font-family: Gretoon;
    font-size: 30px;
    padding-left: 20px;
}
.footer-right{
    text-align: right;
}



/* form khac */

/* login */
.form-area h1{
    font-weight: bold;
    font-size: 30px;
    color: #c00c0c;
    padding: 30px 0px;
    text-align: center;
}
.register-submit{
    text-align: center;
}
.input-update{
    width: 30%;
    margin: auto;
    padding-top: 10px
}
.input-update .input-group{
    width: 100%;
    border: 1px solid #9d9d9d;
    border-radius: 5px;
}
.input-update label.label-input{
    font-size: 16px;
    padding: 10px 0px;
}
.input-update .input-group input, .input-update .input-group input:focus,
.input-update .input-group select, .input-update .input-group select:focus{
    width: 90%;
    border: none;
    min-height: 40px;
    font-family: Arial;
    font-size: 16px;
    padding-left: 5px;
}
.input-update .input-group i{
    font-size: 1.5em;
    color: #c4c4c4;
    padding-left: 4px;
}
.register-submit{
    padding-top: 10px;
}
.login-message-error{
    background-color: #fff0e6;
    border-color: #edd4bb;
    color: #e68f5f;
    font-size: 14px;
    text-align: left;
    position: relative;
    margin-bottom: 10px;
}
.login-message-error:before{
    content: "";
    position: absolute;
    top: 41px;
    left: 15px;
    border-top: 11px solid;
    border-top-color: #edd4bb;
    border-left: 10px solid #fff;
    border-right: 11px solid #fff;
}
.login-message-error:after{
    content: "";
    position: absolute;
    top: 41px;
    left: 15px;
    border-top: 10px solid #fff0e6;
    border-top-color: #fff0e6;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.input-update label.error{
    font-size: 13px;
    color: #FA2929;
}

.tab-menu{
    padding-bottom: 20px;
}
#tabs-form-payment{
    padding-top: 50px;
}
table{
    margin: auto;
}
table tr td{
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}
table tr td.payment-data{
    text-align: center;
}

.setting-dashboard-left{
    text-align: center;
}
.setting-container-title-hidden{
    display: none;
}
.setting-dashboard-content{
    min-height: 40px;
}
input[type=file]{
    display: inline-block;
}
/* */
@media only screen and (min-width: 1200px) {

    .slider-bottom section .flexslider .flex-direction-nav .flex-prev{
        left: -40px !important;
    }
    .slider-bottom section .flexslider .flex-direction-nav .flex-next{
        right: -40px !important;
    }
}

@media only screen and (min-width: 960px) and (max-width: 1200px) {
}


/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) { 
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .tabs li a{
        padding: 0 12px;
    }
    .recomment-game, .body-new{
        padding: 0px;
    }
    .tab_container, .tab-header, .game-focus-content{
        width: 247px;
    }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    .footer-content{
        padding: 20px;
        line-height: 30px
    }
    .footer-right, .footer-left{
        text-align: center;
    }
    .top-player{
        padding-left: 20px;
    }
    .cya-navbar{
        text-align: left;
    }
    button.navbar-toggle{
        float: left;
        margin-left: 5px;
    }
    .cya-search{
        display: none;
    }
    .cya-search-second{
        width: 75%;
        display: inline-block;
        margin-top: 8px;
        margin-right: 16px;
        float: right;
        padding-right: 7px;
    }
    .cya-search-second .form-group{
        float: right;
        margin: 0px;
    }
    .cya-search-second  button{
        position: absolute;
        right: 10px;
        padding-top: 8px;
        border: none;
    }
    .btn-login{
        display: none;
    }
    .header-invisible .btn-login{
        display: inline-block;
    }
    .game-focus-content{
        padding-left: 20px;
    }
    .header-invisible{
        padding-bottom: 10px;
    }
    .btn-login{
        float: left;
        padding-left: 0px
    }
    .btn-login div{
        width: 30%;
        background: none;
    }
    .btn-login span{
        width: 2%;
        background: none;
    }    
    .language-box{
        display: none;
    }
    .language-box-second{
        display: inline-block;
        width: auto;
    }
    .language-box-second select{
        float: none;
    }
    .right-header-top-content{
        display: inline-block;
    }
    .player-online{
        width: 51px;
        padding-left: 7px;
        background-position: -11px;
    }
    .player-online-content{
        width: 120px;
    }
    .link-to-facebook{
        width: 100%;
        display: inline-block;
        padding-top: 10px;
    }
    .link-to-facebook ul{
        float: none;
        display: inline-block;
    }
    .tabs li a{
        padding: 0 12px;
    }
    .tab_container, .tab-header, .game-focus-content{
        width: 247px;
    }
    .input-update{
        width: 40%;
    }
    .setting-dashboard-left{
        padding-top: 50px;
    }
    .setting-dashboard-right{
        padding-bottom: 50px;
    }
    .setting-container-title-hidden{
        display: block;
    }
    .setting-container-title{
        display: none;
    }
    .setting-dashboard-content{
        text-align: center;
    }

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) { 
    .body-new-content .recomment-game-image,.body-new-content .recomment-game-text{
        width: 80%;
    }
    .body-new-content .recomment-game-text h3{
        padding-top: 10px;
    }
    .slider-bottom-header hr{
        width: 48px;
    }
    .input-update{
        width: 80%;
    }

}
@media only screen and (min-width: 480px) and (max-width: 600px) {
    .input-update{
        width: 60%;
    }
}
